<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>日程表</title>
<meta name="decorator" content="default"/>
<link href='${ctxStatic}/fullcalendar-1.6.4/fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='${ctxStatic}/fullcalendar-1.6.4/fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='${ctxStatic}/fullcalendar-1.6.4/lib/jquery.min.js'></script>
<script src='${ctxStatic}/fullcalendar-1.6.4/lib/jquery-ui.custom.min.js'></script>
<script src='${ctxStatic}/fullcalendar-1.6.4/fullcalendar/fullcalendar.js'></script>
<script type="text/javascript">
	/** 当天信息初始化 **/
	$(function(){
		var dayDate = new Date();
		var d = $.fullCalendar.formatDate(dayDate,"dddd");
		var m = $.fullCalendar.formatDate(dayDate,"yyyy年MM月dd日");
		var lunarDate = lunar(dayDate);
		$(".alm_date").html(m + "&nbsp;" + d);
		$(".today_date").html(dayDate.getDate())
		$("#alm_cnD").html("农历"+ lunarDate.lMonth + "月" + lunarDate.lDate);
		$("#alm_cnY").html(lunarDate.gzYear+"年&nbsp;"+lunarDate.gzMonth+"月&nbsp;"+lunarDate.gzDate+"日");
		$("#alm_cnA").html("【"+lunarDate.animal+"年】");
		var fes = lunarDate.festival();
		if(fes.length>0){
			$(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
			$(".alm_lunar_date").show();
		}else{
			$(".alm_lunar_date").hide();
		}
		
	});
	/** calendar配置 **/
	$(document).ready(
	function() {
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
	$("#calendar").fullCalendar(
		{
			header : {
				left : 'prevYear,nextYear',
				center : 'title',
				right : 'prev,next today'
			},
			buttonText: {
				prev: "<span class='fc-text-arrow'>&lsaquo;上个月</span>",
				next: "<span class='fc-text-arrow'>下个月&rsaquo;</span>",
				prevYear: "<span class='fc-text-arrow'>&laquo;上一年</span>",
				nextYear: "<span class='fc-text-arrow'>下一年&raquo;</span>"
			},
			editable : true,
/* 			events: 
			[
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			], */
		    events: function(start, end, callback) {
		        $.ajax({
		            url: '${ctx}/liuxue/remind/myremind.action',
		            dataType: 'json',
		            data: {
		                date: '',
		            },
		            success: function(json) { // 获取当前月的数据
		                var events = [];
		                if (json&&json.length>0) {
		                    $.each(json,function(i,c) {
	                            events.push({
	                                title: c.content,
	                                start: c.remindTime , // will be parsed
	                                color: '#FF0000'
	                            });
		                        
		                    });
		                }
		                callback(events);
		            }
		        });
		    },
			dayClick : function(dayDate, allDay, jsEvent, view) { //点击单元格事件			
				var d = $.fullCalendar.formatDate(dayDate,"dddd");
				var m = $.fullCalendar.formatDate(dayDate,"yyyy年MM月dd日");
				var lunarDate = lunar(dayDate);
				$(".alm_date").html(m + "&nbsp;" + d);
				$(".today_date").html(dayDate.getDate())
				$("#alm_cnD").html("农历"+ lunarDate.lMonth + "月" + lunarDate.lDate);
				$("#alm_cnY").html(lunarDate.gzYear+"年&nbsp;"+lunarDate.gzMonth+"月&nbsp;"+lunarDate.gzDate+"日");
				$("#alm_cnA").html("【"+lunarDate.animal+"年】");
				var fes = lunarDate.festival();
				if(fes.length>0){
					$(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
					$(".alm_lunar_date").show();
				}else{
					$(".alm_lunar_date").hide();
				}
				// 当天则显示“当天”标识
				var now = new Date();
				if (now.getDate() == dayDate.getDate() && now.getMonth() == dayDate.getMonth() && now.getFullYear() == dayDate.getFullYear()){
					$(".today_icon").show();
				}else{
					$(".today_icon").hide();
				}
			},
			loading : function(bool) {
				if (bool)
					$("#msgTopTipWrapper").show();
				else
					$("#msgTopTipWrapper").fadeOut();
			}

		});
	});
	/** 绑定事件到日期下拉框 **/
	$(function(){
		$("#fc-dateSelect").delegate("select","change",function(){
			var fcsYear = $("#fcs_date_year").val();
			var fcsMonth = $("#fcs_date_month").val();
			$("#calendar").fullCalendar('gotoDate', fcsYear, fcsMonth);
		});
	});
	</script>
<style>

/* 	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		} */

	.calendarWrapper {
	width: 1190px;
	margin: 0 auto 15px;
}

#calendar {
	width: 885px;
	background: #fff;
	padding: 15px 10px;
}

.calendarWrapper .rightSidePanel {
	width: 240px;
	padding: 0px 15px;
}
	.dib{display: inline-block;}
	.fr{float: right;}

</style>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/liuxue/remind/calendar">日程表</a></li>
		<shiro:hasPermission name="liuxue:remind:edit"><li><a href="${ctx}/liuxue/remind/form">提醒添加</a></li></shiro:hasPermission>
	</ul>
<div id="msgTopTipWrapper" style="display:none">
		<div id="msgTopTip">
			<span><i class="iconTip"></i>正在载入日历数据...</span>
		</div>
	</div>
	<div class="calendarWrapper">
		<div class="rightSidePanel mb50 fr">
			<div id="div_day_detail" class="h_calendar_alm">
				<div class="alm_date"></div>
				<div class="alm_content nofestival">
					<div class="today_icon"></div>
					<div class="today_date"></div>
					<p id="alm_cnD"></p>
					<p id="alm_cnY"></p>
					<p id="alm_cnA"></p>
					<div class="alm_lunar_date"></div>
				</div>
			</div>
		</div>
		<div id="calendar" class="dib"></div>
	</div>
</body>
</html>